// event handler functions //

function popUpMenu(node) {
	var coords = node.cumulativeOffset();
	// Create pop-up menu
	nodeOptions = new Object;
	nodeOptions.nodeMenu = new Element("div",{'class':'nodeOptionsMenu'});
	nodeOptions.newNodeOption = new Element("div");
	nodeOptions.newNodeOption.update("New");
	nodeOptions.newNodeOption.onclick = function () {newNode(node.id,coords)};
	nodeOptions.nodeMenu.insert ({'bottom' : nodeOptions.newNodeOption});
	nodeOptions.editNodeOption = new Element("div");
	nodeOptions.editNodeOption.update("Edit");
	nodeOptions.editNodeOption.onclick = function () {editNode(node.id)};
	nodeOptions.nodeMenu.insert ({'bottom' : nodeOptions.editNodeOption});
	nodeOptions.deleteNodeOption = new Element("div");
	nodeOptions.deleteNodeOption.update("Delete");
	nodeOptions.deleteNodeOption.onclick = function () {deleteNode(node.id)};
	nodeOptions.nodeMenu.insert ({'bottom' : nodeOptions.deleteNodeOption});
	// find coordinates of node
	nodeOptions.nodeMenu.style.top = coords[1] + 'px';
	width = node.getWidth();
	nodeOptions.nodeMenu.style.left = coords[0] + width + 'px';
	// insert into DOM
	var pageBody = $$('body')[0];
	pageBody.insert ({'bottom' : nodeOptions.nodeMenu});
}

function newNodeForm(id,coords) {
	var formContainer = new Element("div",{'class':'newNodeForm'});
	var form = new Element("form",{'action':'','method':'post','name':'newNode','id':'newNode'});
	var textField = new Element("input",{'type':'text','name':'newNodeName','value':''});
	var idField = new Element('input',{'type':'hidden','name':'nodeID','value':id});
	var submit = new Element('input',{'type':'submit','value':'submit','onclick':'submitNewNode();'});
	formContainer.insert ({'bottom' : form});
	form.insert ({'bottom' : textField});
	form.insert ({'bottom' : idField});
	form.insert ({'bottom' : submit});
	formContainer.style.top = coords[1]+"px";
	formContainer.style.left = coords[0]+"px";
	var pageBody = $$('body')[0];
	pageBody.insert ({'bottom' : formContainer});
}

function submitNewNode() {
	var newNodeForm = $('newNode');
	var newNodeData = new Object();
	newNodeData['parentID'] = newNodeForm.nodeID.value;
	newNodeData['newNodeName'] = newNodeForm.newNodeName.value;
	var formContainer = $$('.newNodeForm')[0];
	formContainer.remove();
	alert('Parent ID: '+newNodeData['parentID']+' New node text: '+newNodeData['newNodeName']);
}

function newNode(id,coords) {
	nodeOptions.nodeMenu.remove();
	newNodeForm(id,coords);
}

function editNode(id) {
	nodeOptions.nodeMenu.remove();
	alert("Edit node"+id);
}

function deleteNode(id) {
	nodeOptions.nodeMenu.remove();
	alert("Delete node"+id);
}

var testTree = {
	id: "a",
	name: "Node A",
	data: {},
	children: [	{
		id: "b",
		name: "Node B",
		data: {},
		children: []
	},
	{
		id: "c",
		name: "Lorem ipsum dolor sit amet. Sic laren puir necesitat guerdo.",
		data: {},
		children: [	{
			id: "d",
			name: "Node D",
			data: {},
			children: []
		}
		]
	}
	]
};

function init() {
	initializeGraph();
}

function initializeGraph() {
	var graphdiv = document.getElementById('graph');
	var w = 1000, h = 500; // TODO div.offsetwidth?
	var canvas = new Canvas('mycanvas', {
		'injectInto': 'graph',
		'width': w,
		'height': h,
		'backgroundColor': '#ffffff'
	});

	var graphConfig = {
		duration: 400,         //set duration for the animation
		transition: Trans.Quart.easeInOut,         //set animation transition type
		levelDistance: 50,         //set distance between node and its children
		Node: {
			height: 60,
			width: 150,
			type: 'rectangle',
			color: '#ccc',
			overridable: true
		},
		Edge: {
			type: 'bezier',
			overridable: true
		},
		onCreateLabel: function(label, node){  
         label.id = node.id;              
         label.innerHTML = node.name;  
         label.onclick = function(){
	  		popUpMenu(this);
         }
         //set label styles  
         var style = label.style;  
         style.width = 150 + 'px';         
         style.cursor = 'pointer';  
         style.color = '#000';  
         style.fontSize = '0.8em';  
         style.textAlign= 'center';
         style.fontFamily = "Arial";
         style.padding = "3px";
     }
	};

	st = new ST(canvas, graphConfig);
	st.loadJSON(testTree);
	st.compute();     //compute node positions and layout
	st.onClick(st.root);     //emulate a click on the root node.
}

Event.observe(window, 'load', function() {
 	init();
});

/*
window.addEventListener("load", init, false); // i forget what final arg is
// gadgets.util.registerOnLoadHandler(initializeGraph);
*/
